<template>
  <div class="create-menu" :class="{ 'is-open': isOpen }">
    <div class="menu-items">
      <button v-for="item in menuItems" 
              :key="item.id" 
              class="menu-item"
              @click="handleItemClick(item)">
        <CreateMenuIcons :name="item.icon" />
        <span>{{ item.label }}</span>
        <span class="arrow">→</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CreateMenuIcons from './icons/CreateMenuIcons.vue'
import { useRouter } from 'vue-router'

const props = defineProps<{
  isOpen: boolean
}>()

const emit = defineEmits<{
  (e: 'select', item: any): void
}>()

const router = useRouter()

const menuItems = [
  { id: 1, label: 'Join class', icon: 'join-class' },
  { id: 2, label: 'Notes', icon: 'notes' },
  { id: 3, label: 'Flashcards', icon: 'flashcards' },
  { id: 4, label: 'New AI Tools for Teachers', icon: 'ai-tools' },
  { id: 5, label: 'AI Video Summarizer', icon: 'video' },
  { id: 6, label: 'AI Lecture Note Taker', icon: 'lecture' },
  { id: 7, label: 'AI PDF Summarizer', icon: 'pdf' },
  { id: 8, label: 'AI PPT Summarizer', icon: 'ppt' },
  { id: 9, label: 'Import from Quizlet', icon: 'quizlet' },
  { id: 10, label: 'Import Manually', icon: 'import' },
]

const handleItemClick = (item: any) => {
  if (item.icon === 'flashcards') {
    router.push('/flashcards')
  }
  emit('select', item)
}
</script>

<style scoped>
.create-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  background-color: #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  transform: translateY(-20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.create-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.menu-items {
  padding: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: none;
  background: none;
  color: white;
  cursor: pointer;
  border-radius: 8px;
  gap: 12px;
  transition: background-color 0.2s ease;
}

.menu-item:hover {
  background-color: #3a3a3a;
}

.menu-item svg {
  width: 24px;
  height: 24px;
  color: #888;
}

.arrow {
  margin-left: auto;
  color: #888;
}
</style> 